﻿<!--顶部-->
<link href="~/Content/styles/index.css" rel="stylesheet" />
<div class="top" id="top">
    <el-row style="height:56px;">
        <el-col :span="5" style="text-align:right;padding-right:25px">
                <img src="~/Content/imgs/ssss.png" style="height: 37px; width: 135px;" />
        </el-col>
        <el-col :span="8" style="margin-top:-8px">
            <el-input placeholder="请输入内容" v-model="search">
                <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" v-on:click="searchKey"></i>
            </el-input>
        </el-col>
        <el-col :span="11" >
            <div class="top_item">
                @*<a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>*@
                <a href="/Car/BuyCar" target="_blank">
                    购物车 <el-badge v-model="Carcount" class="item" type="primary">
                        <i class="el-icon-shopping-cart-1"></i>
                    </el-badge>
                </a>
            </div>
        </el-col>
    </el-row>
</div>
<!--导航-->
<div class="navi" id="navi">
    <a href="/Home/Index">首页</a>
    <a href="/Music/MusicType">分类</a>
    <a href="/Music/Singer">歌手</a>
    @*<a href="/Music/NewCd">DJ歌曲</a>*@
    <a href="/Music/RecomMusic">推荐歌单</a>
</div>
<script>
    $(function () {
        var tDiv = $("#navi");
        var links = $("#navi").find("a");
        index = 0,//默认第一个菜单项
            url = location.href.split('?')[0].split('/').pop();//取当前URL最后一个 / 后面的文件名，pop方法是删除最后一个元素并返回最后一个元素
        if (url) {//如果有取到, 则进行匹配, 否则默认为首页(即index的值所指向的那个)
            for (var i = 0; i < links.length; i++) {//遍历 menu 的中连接地址
                if (links[i].href.indexOf(url) !== -1) {
                    index = i;
                    break;
                }
            }
        }
        links[index].className = 'active';
    });
    var top = new Vue({
        el: '#top',
        data() {
            return {
                search: '',
                Carcount: 0,
            }
        },
        methods: {
            searchKey() {
                if (this.search == '' || this.search == null) {
                    this.$message.error('请输入所需要的内容');
                } else {
                    location.href = '/Home/SearchMusic'
                    localStorage.setItem('keyword', this.search)

                }
            },
            CatCount() {
                var lists = JSON.parse(localStorage.getItem('BuyLists')) || [];
                this.Carcount = lists.length
            }
        },
        mounted() {
           setInterval(() => {  //创建定时器
               this.CatCount()
            }, 100);          
        },
    })
</script>